<template>
  <div id="app">
    <Index v-if="isLogin"/>
    <Login v-else/>
  </div>
</template>

<script>
  // import HelloWorld from './components/HelloWorld'
  import Index from './components/Index'
  import Login from './components/Login'
  import { mapGetters, mapMutations } from 'vuex';

  export default {
      name: 'app',
      components: {
          Index,
          Login
      },
      computed:{
        ...mapGetters([
          'isLogin',
          'getUser'
        ])
      },
      methods:{
        ...mapMutations([
              'logout'
          ]),
      },
      created(){
        const vmThis = this;
        window.onclose  = function(){
          vmThis.logout();
        };
      }
  }
</script>

<style>

  html,body{
    padding: 0px;
    margin: 0px;
  }

  .search-bar .el-form-item {
    width: 120px;
  }

  .el-cascader--small .el-cascader__label {
        line-height: 36px;
  }

  .pull-right{
    float: right;
  }
  .v--modal-overlay{
    background-color: rgba(0, 0, 0, 0.5);
  }


  .slide-fade-enter-active, .slide-fade-leave-active {
    transition: all 0.4s;
  }

  .slide-fade-enter, .slide-fade-leave-to {
    opacity: 0;
    transform: translateY(-20px);
  }

  .hide{
    display: none !important;
  }

  .text-align-center{
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .inline-block{
    display: inline-block;
  }

  .el-table__body tr.current-row>td {
    /* background: #c9e5f5; */
    background: rgba(70, 163, 216, 0.61)
  }
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(70, 163, 216, 0.9);  
  }

  /* .slide-fade-enter-active, .slide-fade-leave-active {
      transition: all 0.4s;
  }

  .slide-fade-enter, .slide-fade-leave-active {
      opacity: 0;
      transform: translateY(-20px);
  } */

  .el-table .erro-row {
      background: #ff4949;
  }

  .el-table .info-row {
    background: #50bfff;
  }

  .el-table .warning-row {
    background: #f7ba2a;
  }
</style>

